<template>
  <transition-flip>
    <!--设备连接-->
    <div v-if="isConnected" class="row q-gutter-x-sm q-mr-sm">
      <div class="text-bold">{{ deviceStatus.device }}</div>
      <!--暂停状态显示-->
      <device-pause
        :need-dialog="true"
        v-if="deviceStatus.status === 'pause'"
      />
      <!--错误状态显示-->
      <device-error
        :need-dialog="true"
        v-else-if="deviceStatus.status === 'error'"
      />
      <!--复位状态显示-->
      <device-reset
        :need-dialog="true"
        v-else-if="deviceStatus.status === 'resetting'"
      />
      <!-- 充电中显示 -->
      <battery-charge
        :need-dialog="true"
        :battery="deviceStatus.batteryNumber"
        v-else-if="deviceStatus.charge"
      />
      <!--急停状态显示-->
      <device-stop :need-dialog="true" v-else-if="deviceStatus.emergencyStop"/>
      <!--电量显示-->
      <battery-num :battery="deviceStatus.batteryNumber" v-else/>
      <!-- 按一下锁屏  长按3s关机  长按5s强制关机 -->
      <!-- 关机 -->
      <device-shutdown ref="dialogShut"/>
      <!-- 锁定 -->
      <device-lock ref="dialogLock"/>


      <!--主电池低于临界值时显示-->
      <device-prompt
        :need-dialog="true"
        v-if="deviceStatus.batteryNumber < deviceStatus.battSpareD"
        :status="deviceStatus"
        :message=" `当前主电池电量${deviceStatus.batteryNumber}已低于临界值${deviceStatus.battSpareD},请及时更换主电池`"
      />


      <!--主电池离临界值还有5%的时候显示-->
      <device-prompt
        :need-dialog="true"
        v-else-if="deviceStatus.batteryNumber-5 < deviceStatus.battSpareD"
        :status="deviceStatus"
        :message="`当前主电池电量${deviceStatus.batteryNumber}%；将要达到临界值${deviceStatus.battSpareD}%，达到临界值后，将自动切换到备用电池，机械臂将断电`"
      />


    </div>

    <!--设备未连接-->
    <div
      v-else
      class="text-bold text-center row text-negative items-center q-gutter-sm"
    >
      <div>{{ $t("indexPage.设备未连接") }}</div>
      <q-spinner-hourglass size="2rem" color="negative"/>
    </div>

  </transition-flip>
</template>

<script setup>
import TransitionFlip from "components/animations/Flip.vue";
import BatteryNum from "components/status/show/BatteryNum.vue";
import BatteryCharge from "components/status/show/BatteryCharge.vue";
import DeviceStop from "components/status/show/DeviceStop.vue";
import DevicePause from "components/status/show/DevicePause.vue";
import DeviceError from "components/status/show/DeviceError.vue";
import DeviceReset from "components/status/show/DeviceReset.vue";
import DeviceShutdown from "components/status/dialog/DeviceShutdown.vue";
import DeviceLock from "components/status/dialog/DeviceLock.vue";
import DevicePrompt from "components/status/show/DevicePrompt.vue";
import {ref, watch} from "vue";

const props = defineProps({
  isConnected: {type: Boolean, default: false},
  deviceStatus: Object,
});

const dialogShut = ref();
const dialogLock = ref();
let pressTime = 0; // 按下的时间
let releaseTime = 0; // 长按的时间

watch(
  () => props.deviceStatus.powerOff,
  (newVal, oldVal) => {
    // 确定当前状态
    statusFn(newVal, oldVal);
  }
);

// 判断确定锁屏 和 关机状态
function statusFn(newVal, oldVal) {
  // 按下
  if (newVal && !oldVal) {
    pressTime = new Date().getTime();
  }
  // 松开
  if (!newVal && oldVal) {
    releaseTime = new Date().getTime();
    const time = releaseTime - pressTime;
    if (time < 2000) {
      dialogLock.value.visible = true;
    } else {
      dialogShut.value.visible = true;
    }
  }
}
</script>
